<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品信息</title>
    <!-- 引入bootstrap.css  ctrl+/ -->
    <link rel="stylesheet" href="/boot/plugins/bootstrap/css/bootstrap.css">
    <style>
        #nav_img{
            width: 50px;
            height: 50px;
            border-radius: 50%;
            padding: 2px;
        }
        /*购买表单的间隔*/
        .product-form {
            margin: 10px 0;
        }
        /*表单行的间隔*/
        .form-space {
            margin: 10px 0;
        }
        /*价格框的小字体样式*/
        .price-bar small {
            font-size: 14px;
        }
        /*价格框的样式*/
        .price-bar {
            background: #f0f9ff;
            color: #092f97;
            padding: 8px;
            border: 3px solid #699fd7;
            border-radius: 3px;
            font-size: 30px;
            margin: 5px;
        }
        /*售后的图标*/
        .saled-icon {
            color: #092F97;
            font-size: 25px;
        }
        /*售后的标题*/
        .saled-title {
            color: #092F97;
            font-size: 18px;
        }
        /*售后的内容*/
        .saled-content {
            color: #999999;
            font-size: 12px;
            padding-bottom: 40px;
        }
        /*数量按钮样式*/
        .num-btn {
            width: 30px;
        }
        .num-text {
            text-align: center;
        }
    </style>
</head>
<body>
<!-- 导航begin -->
<div class="container-fluid">
    <div class="row">
        <nav class="navbar navbar-default" role="navigation">
            <div class="container-fluid">
                <div class="navbar-header">
                    <div class="navbar-header">
                        <a href="../index.html"><img src="/boot/imgs/logo.png"></a>
                    </div>
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="../index.html">首页</a></li>
                        <li><a href="indexn.html">男鞋</a></li>
                        <li><a href="indexv.html">女鞋</a></li>
                    </ul>
                </div>
                <div class="collapse navbar-collapse" id="example-navbar-collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li class="active logins"><a href="#"></a></li>
                        <li class="no_login login_in"><a href="#" data-toggle="modal" data-target="#myModal">登录</a></li>
                        <li class="no_login"><a href="#">注册</a></li>
                        <li class="logins"><a href="car.html">我的订单</a></li>
                        <li class="logins"><a href="car.html">我的购物车 <span class="glyphicon glyphicon-shopping-cart"></span></a></li>
                        <li class="logins login_out"><a href="#">安全退出</a></li>
                        <li class="logins"><img style="" id="nav_img" src="../../imgs/tx.jpg"></li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
</div>
<!-- 导航end  ctrl+/ -->


<div class="container">
    <div class="col-md-10 col-md-offset-1" style="margin-bottom: 10px">
        <div class="col-md-6">
            <div class="col-md-12" style="border: 1px solid #3c3c3c">
                <img id="" style="width: 400px;height: auto " src="../../imgs/NV2.png"/>
            </div>
        </div>
        <div class="col-md-6">
            <h3 id="product-title" class="col-md-12 title-row-1">女大童休闲鞋YKCS086-72</h3>
            <p id="product-sell-point" class="col-md-12 text-row-1"><small>仅上海，广州，沈阳仓有货！预购从速！</small></p>
            <div class="col-md-12 price-bar">
                <small>限时售价：</small> ¥<span id="product-price">168.00</span>
                <div><small>*退货补运费 *7天无理由退货 *24小时快速退款 </small></div>
            </div>
            <form class="form-inline product-form col-md-12" role="form">
                <div class="col-md-12 form-space">
                    <label for="num">数量：</label>
                    <input id="numDown" type="button" value="-" class="num-btn"/>
                    <input id="num" type="text" size="2" readonly="readonly" class="num-text" value="1">
                    <input id="numUp" class="num-btn" type="button" value="+"/>
                </div>
                <div class="col-md-12 form-space">
                    <p><small><b>舒步商城</b>发货并提供售后服务,今日下单,明日送达</small></p>
                </div>
                <div class="col-md-12 form-space">
                    <input class="btn btn-primary btn-lg btn-block" type="button" value="立即购买" onclick="purchase()">
                </div>
            </form>
        </div>
    </div>
    <!--商品信息展示结束-->
    <!--售后信息开始-->
    <div class="col-md-offset-1 col-md-10">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h2 class="panel-title">售后保障</h2>
            </div>
            <div class="panel-body ">
                <div class="row">
                    <div class="col-md-1 saled-icon"><span class="glyphicon glyphicon-globe"></span></div>
                    <div class="col-md-11 saled-title">正品保障</div>
                </div>
                <div class="row">
                    <p class="col-md-offset-1 col-md-11 saled-content">
                        舒步商城向您保证所售商品均为正品行货，舒步商城自营商品开具机打发票或电子发票。</p>
                </div>
                <div class="row">
                    <div class="col-md-1 saled-icon"><span class="glyphicon glyphicon-globe"></span></div>
                    <div class="col-md-11 saled-title">全国联保</div>
                </div>
                <div class="row">
                    <p class="col-md-offset-1 col-md-11 saled-content">
                        凭质保证书及舒步商城发票，可享受全国联保服务（奢侈品、钟表除外；奢侈品、钟表由电脑商城联系保修，享受法定三包售后服务），与您亲临商场选购的商品享受相同的质量保证。舒步商城还为您提供具有竞争力商品价格和运费政策，请您放心购买！
                        <br/>
                        注：因厂家会在没有任何提前通知的情况下更改产品包装、产地或者一些附件，本司不能确保客户收到的货物与商城图片、产地、附件说明完全一致。只能确保为原厂正货！并且保证与当时市场上同样主流新品一致。若本商城没有及时更新，请大家谅解！
                    </p>
                </div>
                <div class="row">
                    <div class="col-md-1 saled-icon"><span class="glyphicon glyphicon-globe"></span></div>
                    <div class="col-md-11 saled-title">无忧退货</div>
                </div>
                <div class="row">
                    <p class="col-md-offset-1 col-md-11 saled-content">
                        客户购买商品7日内（含7日，自客户收到商品之日起计算），在保证商品完好的前提下，可无理由退货。（部分商品除外，详情请见各商品细则）</p>
                </div>
                <div class="saled-content">
                    <small><b>权利声明：</b><br/>
                        所有商品信息、商品咨询等内容，是舒步商城重要的经营资源，未经许可，禁止非法转载使用。<br/>
                        注：本站商品信息均来自于合作方，其真实性、准确性和合法性由信息拥有者（合作方）负责。本站不提供任何保证，并不承担任何法律责任。</small>
                </div>
            </div>
        </div>
    </div>
</div>
<!--页脚开始-->






<!-- 因为bootstrap依赖于jquery,必须先引入jquery -->
<script src="/boot/plugins/jquery/jquery.min.js"></script>
<!-- 引入bootstrap.js -->
<script src="/boot/plugins/bootstrap/js/bootstrap.js"></script>

<script>

    //购物数量加1
    $("#numUp").click(function() {
        var n = parseInt($("#num").val());
        $("#num").val(n + 1);
    })
    //购物数量-1
    $("#numDown").click(function() {
        var n = parseInt($("#num").val());
        if (n == 1) {
            return;
        }
        $("#num").val(n - 1);
    })

    function purchase() {
        window.location='car.html'
    }









    //检测本地存储uname - username
    $(function(){
        //从本地存储中去获取
        let uname = localStorage.getItem("uname")
        //未登录
        let lis = document.querySelectorAll(".no_login");
        //登录
        let lios = document.querySelectorAll(".logins");
        if(uname==null){
            for(let i=0;i<lis.length;i++){
                lis[i].style.display="";
            }

            for(let i=0;i<lios.length;i++){
                lios[i].style.display="none"
            }

        }else{

            for(let i=0;i<lis.length;i++){
                lis[i].style.display="none";
            }

            for(let i=0;i<lios.length;i++){
                if(i==0){
                    lios[i].children[0].innerHTML=uname
                }
                lios[i].style.display=""
            }

        }
    })
    $(function(){
        $(".login_in").click(function(){
            window.location='/boot/views/users/login.html'
        })})

    $(function(){
        $(".login_out").click(function(){
            let uname = localStorage.getItem("uname");
            localStorage.clear();
            window.location = '/boot/views/users/login.html';
        })})

</script>
</body>
</html>